---
import {
    Astronav,
    MenuItems,
    MenuIcon,
    Dropdown,
    DropdownItems,
    DropdownSubmenu,
} from "astro-navbar";

import Logo from "./logo.astro";
---

<div
    id="navbar-div"
    class="text-white flex-col md:flex-row flex justify-between items-center rounded-2xl bg-[#040506] py-3 px-6
  shadow border border-neutral-800"
>
    <style>
        #navbar-div {
            box-shadow: 0px 0px 74.6px 0px rgba(255, 255, 255, 0.09);
        }
    </style>
    <Astronav>
        <div class="flex justify-between items-center w-full md:w-auto">
            <Logo />
            <MenuIcon class="w-4 h-4 text-white md:hidden" />
        </div>
        <MenuItems
            class="hidden mx-auto md:py-0 py-3 sm:flex md:flex-row flex-col md:gap-3 font-normal text-white/60 text-[0.875rem]"
        >
            <a href="/llm" class="transition-all mr-4 hover:text-white/70">AI</a
            >
            <a
                href="/integrations"
                class="mr-4 hover:text-white/70 transition-all">Integrations</a
            >
            <a href="/docs" class="mr-4 hover:text-white/70 transition-all"
                >Docs</a
            >
            <a href="/queries" class="mr-4 hover:text-white/70 transition-all"
                >Hub</a
            >
            <a href="/recipes" class="mr-4 hover:text-white/70 transition-all"
                >Guides</a
            >
        </MenuItems>
        <div class="hidden md:flex items-center">
            <a href="https://github.com/julien040/anyquery" class="mr-4"
                ><svg
                    fill="none"
                    height="25"
                    viewBox="0 0 24 25"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                    class="text-white/80 hover:text-white transition-all"
                    ><path
                        d="m12 2.5c-1.3132 0-2.61358.25866-3.82684.7612-1.21325.50255-2.31564 1.23915-3.24423 2.16773-1.87536 1.87537-2.92893 4.41891-2.92893 7.07107 0 4.42 2.87 8.17 6.84 9.5.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34-.46-1.16-1.11-1.47-1.11-1.47-.91-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.87 1.52 2.34 1.07 2.91.83.09-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.92 0-1.11.38-2 1.03-2.71-.1-.25-.45-1.29.1-2.64 0 0 .84-.27 2.75 1.02.79-.22 1.65-.33 2.5-.33s1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02.55 1.35.2 2.39.1 2.64.65.71 1.03 1.6 1.03 2.71 0 3.82-2.34 4.66-4.57 4.91.36.31.69.92.69 1.85v2.74c0 .27.16.59.67.5 3.97-1.34 6.83-5.08 6.83-9.5 0-1.3132-.2587-2.61358-.7612-3.82683-.5026-1.21326-1.2391-2.31565-2.1677-3.24424-.9286-.92858-2.031-1.66518-3.2443-2.16773-1.2132-.50254-2.5136-.7612-3.8268-.7612z"
                        fill="currentColor"></path></svg
                >
                <a
                    id="button-navbar"
                    href="/docs/#installation"
                    class="button-"
                >
                    Download
                </a>
                <style>
                    #button-navbar {
                        padding: 6px 14px;
                        justify-content: center;
                        align-items: center;
                        border-radius: 8px;
                        background: rgba(255, 255, 255, 0.15);
                        font-size: 0.875rem;
                        font-weight: 500;
                        color: rgba(255, 255, 255, 0.8);
                        transition: background 0.2s ease-in-out;
                    }
                    #button-navbar:hover {
                        background: rgba(255, 255, 255, 0.2);
                    }
                </style>
            </a>
        </div>
    </Astronav>
</div>
